<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input style="width: 200px;"
                class="filter-item"
                placeholder="请输入文件模板名称"
                v-model="queryForm.templateName">
      </el-input>
      <el-button class="filter-item"
                 @click="doQuery"
                 type="primary"
                 icon="el-icon-search">查询</el-button>
      <el-button v-permission="'template:add'"
                 class="filter-item"
                 style="margin-left: 10px;"
                 @click="openCreateDialog"
                 type="success"
                 icon="el-icon-plus">新增</el-button>
    </div>
    <el-table v-loading="loading"
              :data="records"
              style="width: 100%">
      <el-table-column prop="rowId"
                       label="ID"
                       width="100"
                       align="center">
      </el-table-column>
      <el-table-column prop="name"
                       label="文件名称"
                       width="150"
                       align="center">
      </el-table-column>
      <el-table-column prop="type"
                       label="类型"
                       width="150"
                       align="center">
        <template slot-scope="scope">
          {{Dicts.FILE_TYPE[scope.row.type]}}
        </template>
      </el-table-column>
      <el-table-column prop="reloadPath"
                       label="文件存放地址"
                       width="200"
                       align="center">
      </el-table-column>
      <el-table-column prop="content"
                       label="描述"
                       width="200"
                       align="center">
      </el-table-column>
      <el-table-column prop="model"
                       label="适配设备模式"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          {{Dicts.FILE_MODEL[scope.row.model]}}
        </template>
      </el-table-column>
      <el-table-column prop="createTime"
                       label="创建时间"
                       width="250"
                       align="center">
      </el-table-column>
      <el-table-column prop="isOpen"
                       label="共享状态"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          {{Dicts.FILE_IS_OPEN[scope.row.isOpen]}}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       label="操作"
                       class-name="small-padding"
                       fixed="right"
                       width="200">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleQueryById(scope.row)" title="查看" icon="el-icon-search" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="queryForm.current"
                     :page-sizes="[10,20,30, 50]"
                     :page-size="queryForm.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="queryForm.total">
      </el-pagination>
    </div>

    <el-dialog :title="'新增文件模板'"
               :visible.sync="dialogAddFormVisible"
               width="50%">
      <el-form :model="addForm"
               label-width="160px"
               :rules="addFormRules"
               ref="addForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件名称"
                          prop="name">
              <el-input v-model="addForm.name"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="是否共享"
                          prop="isOpen">
              <el-radio v-model="addForm.isOpen"
                        label="1">共享</el-radio>
              <el-radio v-model="addForm.isOpen"
                        label="0">不共享</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="文件类型"
                          prop="type">
              <el-select v-model="addForm.type"
                         placeholder=""
                         style="width: 100%;">
                <el-option v-for="(val, key) in Dicts.FILE_TYPE"
                           :key="key"
                           :label="val"
                           :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件存放地址"
                          prop="reloadPath">
              <el-input v-model="addForm.reloadPath"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="适配设备类型"
                          prop="module">
              <el-select v-model="addForm.model"
                         placeholder=""
                         style="width: 100%;">
                <el-option v-for="(val, key) in Dicts.FILE_MODEL"
                           :key="key"
                           :label="val"
                           :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件模板描述:"
                          prop="content">
              <el-input :readonly="false"
                        v-model="addForm.content"
                        auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogAddFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="saveAddForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="'共享文件'"
               :visible.sync="dialogFormVisible"
              :append-to-body="true"
               width="50%"
               height="300">
     <el-table :data="tableData"
                    stripe
                    max-height="400"
                    style="height:400px;width:755px">
            <el-table-column prop="ver"
                             label="版本号"
                             width="150"
                             align="center">
            </el-table-column>
            <el-table-column prop="content"
                             label="描述"
                             width="150"
                             align="center">
            </el-table-column>
            <el-table-column prop="createTime"
                             label="操作日期"
                             width="150"
                             align="center">
            </el-table-column>

          </el-table>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                  @click="dialogFormVisible = false"">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deleteDeviceParamTemplate, queryDeviceParamTemplateDetail, saveDeviceParamTemplate, addDeviceParamTemplate } from '@/api/device'
import { updateMarket,findFileByTempId} from '@/api/terminal'

export default {
  name: 'ParaTemplateList',
  data() {
    var checkTemplateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('模板名称不能为空'))
      } else {
        callback()
      }
    }
    var checkHandUpTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('呼叫挂断时间不能为空'))
      }
      if (!/^[0-9]{2}$/.test(value)) {
        callback(new Error('请输入2位数字'))
      } else {
        callback()
      }
    }
    var checkCallWaitTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('呼叫等待时间参数不能为空'))
      }
      if (!/^[0-9]{2}$/.test(value)) {
        callback(new Error('请输入2位数字'))
      } else {
        callback()
      }
    }
    var checkAlarmTaskTime = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('定时更新参数不能为空'))
      }
      if (!/^[0-9]{1,2}$/.test(value)) {
        callback(new Error('请输入2位数字'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      loading: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        importance: undefined,
        title: undefined
      },
      fileForm: {
        tempName:undefined,
        title: undefined
      },
      detailFormRules: {
        templateName: [
          { validator: checkTemplateName, trigger: 'blur' }
        ],
        termiAutoHandupTime: [
          { validator: checkHandUpTime, trigger: 'blur' }
        ],
        callWaitTime: [
          { validator: checkCallWaitTime, trigger: 'blur' }
        ],
        alarmTaskTime: [
          { validator: checkAlarmTaskTime, trigger: 'blur' }
        ]
      },
      addFormRules: {
        templateName: [
          { validator: checkTemplateName, trigger: 'blur' }
        ],
        termiAutoHandupTime: [
          { validator: checkHandUpTime, trigger: 'blur' }
        ],
        callWaitTime: [
          { validator: checkCallWaitTime, trigger: 'blur' }
        ],
        alarmTaskTime: [
          { validator: checkAlarmTaskTime, trigger: 'blur' }
        ]
      },
      detailForm: {
        rowId: null,
        videoCallFlag: '',
        callWaitTime: 0,
        termiAutoHandupTime: '',
        resolutionRatio: '',
        lockOpenFlag: '',
        alarmTaskTime: '',
        authCode: '',
        termiPhoneNum: '',
        volume: '',
        callVolume: '',
        openDoorPwd: '',
        bluetoothToken: '',
        morningSoundStart: '',
        morningSoundEnd: '',
        afternoonSoundStart: '',
        afternoonSoundEnd: '',
        isOpen: ''
      },
      addForm: {
        templateName: '',
        termiAutoHandupTime: '',
        callWaitTime: '',
        alarmTaskTime: ''
      },
      records: [],
      tableData: []
    }
  },
  created() {
    this.doQuery()
  },
  methods: {
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      updateMarket(this.queryForm).then(({ data: { data }}) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该示例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeviceParamTemplate(rowId).then(({ data: { data, msg }}) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    handleQueryById({ rowId }) {
      this.dialogFormVisible = true
      findFileByTempId(rowId).then(({ data: { code, data, msg }}) => {
        if (code === 0) {
          this.tableData=data
        }
      })
    },
    openCreateDialog() {
      this.addForm = {
      }
      this.dialogAddFormVisible = true
      this.$refs.addForm && this.$refs.addForm.resetFields()
    },
    openEditDialog() {
      this.detailForm = {}
      this.dialogFormVisible = true
      this.$refs.detailForm && this.$refs.detailForm.resetFields()
    },
    saveDetailForm() {
      this.$refs.detailForm.validate(valid => {
        if (valid) {
          saveDeviceParamTemplate(this.detailForm).then(({ data: { data, msg, code }}) => {
            this.doQuery()
            this.dialogFormVisible = false
            this.$message({
              showClose: true,
              message: msg,
              type: 'success'
            })
          }).catch(_ => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    saveAddForm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          addDeviceParamTemplate(this.addForm).then(({ data: { data, msg, code }}) => {
            this.doQuery()
            this.dialogAddFormVisible = false
            this.$message({
              showClose: true,
              message: msg,
              type: 'success'
            })
          }).catch(_ => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  },
  components: {
  }
}
</script>

<style scoped>
</style>
